<template>
    <div id="deta">
        <div class="hea">
            <i @click="goBack" class="el-icon-arrow-left"></i>
            <p>{{name}}</p>
        </div>
        <div class="mains" v-if="data.imgUrl">
            <img :src="url + data.imgUrl" alt="">
            <van-tabs v-model="active" scrollspy sticky>
                <div class="de">
                    <van-notice-bar scrollable :speed=100>
                        <span>限时优惠中  还剩<van-count-down :time="time"  format="DD 天 HH 时 mm 分 ss 秒">
                        </van-count-down>结束，{{data.buyNum}}人已购买</span>
                        
                    </van-notice-bar>
                    <div class="teade">
                        <div class="lescoll">
                            <p>{{data.courseName}}<span>({{data.likeNum}})</span></p>
                            <van-icon @click="course" size=50 name="like-o" v-if="!likeS"/>
                            <van-icon @click="course" size=50 color="red" name="like" v-else/>
                        </div>
                        <p class="sellp"><span></span>{{data.sellPrice === 0 ? '免费' : '￥'+data.sellPrice + '.00'}}<span></span></p>
                        <p class="pri">原价：￥{{data.originalPrice}}</p>
                    </div>
                    <div class="teacher">
                        <img :src="url2 + teacher.teacherImg" alt="">
                        <div class="teadd">
                            <p>{{teacher.teacherName}}<span>讲师</span></p>
                            <p>{{teacher.teacherSynopsis}}</p>
                        </div>
                    </div>
                </div>
                <van-tab title="课程简介">
                    <h2>课程简介</h2>
                    <p>{{data.courseIntroduce}}</p>
                </van-tab>
                <van-tab title="课程目录">
                    <h2>课程目录</h2>
                    <pre class="pmu">{{data.courseCatalogue}}</pre>
                </van-tab>
                <div>
                    <span class="rate">如果喜欢，请给课程评分</span>
                    <el-rate
                        v-model="value"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template={value}>
                    </el-rate>
                </div>
                <van-tab style="borderBottom:none" title="学员评价" class="tab3">
                    <p class="ping">评论<span>({{pinglun.length}})</span></p>
                    <div class="pinglist">
                        <div class="pllist" v-for="item in pinglun" :key="item.commId">
                            <div class="pl">
                                <img :src="item.user.usersimg" alt="">
                                <div class="author">
                                    <p>{{item.user.nickname}}</p>
                                    <p>{{item.commentTime | setDate}}</p>
                                </div>
                                <div class="zan">
                                    <van-icon @click="changeLike(item.commentsStatus,item.commId)" name="good-job-o" v-if="item.commentsStatus ==0"/>
                                    <van-icon @click="changeLike(item.commentsStatus,item.commId)" color="red" name="good-job" v-else/>
                                    <span>{{item.commentLikes}}</span>
                                </div>
                            </div>
                            <p class="text">{{item.commentContext}}</p>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <van-goods-action v-if="$store.state.id != ''">
            <van-goods-action-icon icon="chat-o" text="客服" />
            <van-goods-action-button 
                v-if="this.money !== 0"
                @click="onClickOrder"
                color="#be99ff" 
                type="warning" 
                text="加入购物车" />
            <van-goods-action-button 
                @click="onClickButton"
                color="#7232dd" 
                type="danger" 
                text="立即购买" />
        </van-goods-action>
        <div class="car">
            
        </div>
        <router-link to="/order">
            <el-badge :value="num" class="item">
                <i class="iconfont icon-icon-test11" ></i>
            </el-badge>
        </router-link>
        
    </div>
</template>

<script>
import {LesDeta,getPing,detailBuy,detaPay,detaAdd,ClickLike,CourLike,LikeStatus,myorder} from '@/api'
    export default {
        data(){
            return{
                url:"http://192.168.10.32/yonghao/img/",
                url2:"http://192.168.10.32/cuihe/img/",
                name:"课程详情",
                active: 0,
                time: 168 * 60 * 60 * 1000,
                data:{},
                teacher:{},
                value:null,
                pinglun:{},
                img:'',
                courseId:'',
                money:'',
                likeS:'',
                num:''
            }
        },
        created(){
            this.getDetail()
            this.getPingList()
            this.getLength()
        },
        methods:{
            getLength(){
                let uid = this.$store.state.id
                myorder({orderState:2,userId:uid}).then(res => {
                    this.num = res.data.data.length
                })
            },
            course() {
                let cid = this.$route.query.courseId
                let uid = this.$store.state.id
                let lik = null
                if(this.likeS === false){
                    lik = 1
                }else{
                    lik = 0
                }
                if(this.$store.state.id != ''){
                    CourLike({courseId:cid,uId:uid,likeState:lik}).then(res => {
                        this.getDetail()
                    })
                }else{
                    this.$toast({
                        message:'请先登录哦！',
                        icon:'fail'
                    })
                }
            },
            changeLike(status,id) {
                if(status === 0){
                    status = 1
                }else{
                    status = 0
                }
                if(this.$store.state.id != ''){
                    ClickLike({clickLike:status,commId:id}).then(res => {
                        this.getPingList()
                    })
                }else{
                    this.$toast({
                        message:'请先登录哦！',
                        icon:'fail'
                    })
                }
                
            },
            onClickOrder() {
                let id = this.$store.state.id
                detaAdd({courseId:this.courseId,userId:id}).then(res => {
                    if(res.data.data === 1){
                        this.getLength()
                        this.$toast({ 
                            message: '加入购物车成功',
                            icon: 'success',
                            duration:1000
                        });
                    }else if(res.data.data === 2){
                        this.$toast({ 
                            message: '请在购物车中付款哦！',
                            icon: 'fail',
                            duration:1000
                        });
                        setTimeout(() => {
                            this.$router.push('/order')
                        },2000)
                    }else{
                        this.$toast({ 
                            message: '已购买，请查看！',
                            icon: 'fail',
                            duration:1000
                        });
                        setTimeout(() => {
                            this.$router.push('/order')
                        },2000)
                    }
                })
            },
            onClickButton() {
                let id = this.$store.state.id
                detailBuy({courseId:this.courseId,userId:id}).then(res => {
                    if(res.data.data === 1){
                        detaPay({money:this.money,uid:id}).then(res => {
                            if(res.data.ststus === 1) {
                                this.$store.dispatch("changeMoney",res.data.data.userMoney)
                                this.$toast({ 
                                    message: '购买课程成功',
                                    icon: 'success',
                                    duration:1000
                                });
                            }else{
                                this.$message({
                                    message:`${res.data.msg}`,
                                    type:'error'
                                })
                            }
                            
                        })
                    }else if(res.data.data === 2){
                        this.$toast({ 
                            message: '请在购物车中付款哦！',
                            icon: 'fail',
                            duration:1000
                        });
                        setTimeout(() => {
                            this.$router.push('/order')
                        },2000)
                    }else{
                        this.$toast({ 
                            message: '已购买,请查看！',
                            icon: 'fail',
                            duration:1000
                        });
                        setTimeout(() => {
                            this.$router.push('/order')
                        },2000)
                    }
                })
            },
            getPingList() {
                let id = this.$route.query.courseId 
                getPing(id).then(res => {
                    this.value = Number(res.data.data.commentsScore)
                    this.pinglun = res.data.data.courseCommentsVos
                })
            },
            goBack() {
                this.$router.push('/home')
            },
            getDetail() {
                let id = this.$route.query.courseId
                let uid = this.$store.state.id
                LesDeta(id).then(res => {
                    this.data = res.data.data
                    this.teacher = res.data.data.teacher
                    this.courseId = res.data.data.courseId
                    this.money = res.data.data.sellPrice
                })
                if(this.$store.state.id != ''){
                    LikeStatus({courseId:id,uId:uid}).then(res => {
                        this.likeS=res.data.data.like
                    })
                }
            },
        }
    }
</script>

<style lang="scss">
.hea{
    display: flex;
    align-items: center;
    padding: 1.3vh 0;
    >i{
        font-size: 6vw;
    }
    >p{
        font-size: 4.5vw;
        margin-left: 35vw;
    }
}
.mains{
    margin-bottom: 10vh;
    img{
        width: 100%;
    }
}
.van-count-down{
    display: inline;
}
.van-tabs--line .van-tabs__wrap{
    height: 5.5vh;
}
.van-tab{
    font-size: 3.5vw;
    line-height: 7vh;
}
.van-notice-bar{
    height: 5.5vh;
    font-size: 3.5vw;
    // padding: 0;
}
.van-count-down{
    font-size: 3.5vw;
    color: #ed6a0c;
}
.teade{
    padding: 5vw;
    .lescoll {
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
            font-size: 4.5vw;
            font-weight: bold;
            span{
                margin-left: 2vw;
            }
        }
    }
    .sellp{
        font-size: 8vw;
        font-weight: bold;
        color: #FF9D02;
        margin-top: 2.5vh;
        span{
            font-size: 4vw;
        }
    }
    .pri{
        text-decoration: line-through;
        font-size: 1vw;
    }
} 
.teacher {
    padding-left: 5vw;
    display: flex;
    border-bottom: 0.1vw solid #999;
    padding-bottom: 3vh;
    img{
        width: 13vw;
        height: 13vw;
        border-radius: 50vw;
    }
    .teadd{
        margin-left: 3vw;
        >p:nth-child(1){
            margin-top: 1.5vh;
            font-size: 3.5vw;
            color:#999;
            span{
                margin-left: 3vw;
                padding: 0.5vw 2vw;
                border-radius: 3vw;
                background: rgba(231, 252, 247, 1);
                color: #69DEC4;
            }
        }
        >p:nth-child(2){
            margin-top: 1vh;
            font-size: 3.3vw;
            color:#999;
            width: 68vw;
        }
    }
}
.van-tab__pane {
    border-bottom: 0.1vw solid #999;
    padding-bottom: 5vw;
    h2 {
        font-size: 4.5vw;
        padding-left: 5vw;
        margin: 3vh 0;
    }
    >p{
        padding: 0 5vw;
        font-size: 2.7vw;
        line-height: 5vh;
    }
} 
.pmu{
    padding-left: 5vw;
    font-size: 3.8vw;
    line-height: 4vh;
    color: #333;
    font-family: '应用字体 Regular', '应用字体';
}
.rate{
    display: block;
    color: #999;
    font-weight: initial;
    font-size: 4vw;
    margin: 3vw 0 2vw 19vw;
}
.el-rate{
    margin-left: 22vw;
}
.el-rate__icon{
    font-size: 10vw;
}
.el-rate__text{
    display: block;
    font-size: 3.5vw;
    margin-left: 24vw;
    margin-top: 1vh;
}
.tab3{
    margin-top: 17vw;
    .ping{
        font-size: 1.7vw;
        font-weight: bold;
        span{
            margin-left: 2vw;
            color: #999;
            font-size: 1.3vw;
        }
    }
}
.pllist{
    border-bottom: 0.1vw solid #999;
    .text{
        margin-left: 5vw;
        font-size: 1.5vw;
        padding-bottom: 3vw;
    }
}
.pl {
    display: flex;
    align-items: center;
    padding: 5vw;
    img{
        width: 14vw;
        height: 14vw;
        border-radius: 50vw;
    }
    .author{
        margin-left: 2vw;
        p:nth-child(1){
            margin-top: 2vw;
            font-size: 4.2vw;
            color: #999;
        }
        p:nth-child(2){
            margin-top: 1vw;
            font-size: 3.7vw;
            color: #999;
        }
    }
    .van-icon {
        font-size: 6vw;
    }
    .zan {
        margin-left: 30vw;
    }
    span{
        margin-left: 1vw;
        font-size: 4vw;
    }
}
.van-toast{
    width: 17vh;
    height: 17vh;
}
.van-toast__icon{
    font-size: 18vw;
}
.van-toast__text{
    font-size: 3vw;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-badge{
    position: fixed;
    bottom: 20vw;
    right: 3vw;
    border: 1px solid #000;
    background: rgba(255,255,255,0.5);
    border-radius: 50vw;
    padding: 2vw;
    i{
        font-size: 9vw;
    }
}
.el-badge__content {
    width: 2.5vh;
    background-color: red;
    border-radius: 50%;
    color: #FFF;
    display: inline-block;
    font-size: 3.5vw;
    height: 2.5vh;
    line-height: 4.5vw;
    padding: 4.7px 6px;
    text-align: center;
    white-space: nowrap;
    border: 1vw solid #FFF; 
}
.el-badge__content.is-fixed {
    position: absolute;
    top: 1.5vw;
    right: 4vw;
    transform: translateY(-50%) translateX(100%);
}
</style>
<style scoped>
.pl span{
    margin-left: 0;
}
#deta>>>.van-goods-action{
    height: 6vh;
    background: #fff;
    border-top: 0.1vw solid #999;
}
#deta>>>.van-goods-action-icon__icon{
    width: 12vw;
    font-size: 6vw;
}
#deta>>>.van-goods-action-icon{
    font-size: 3vw;
}
#deta>>>.van-goods-action-button{
    height: 4vh;
    font-size: 3.5vw;
}
</style>